import { OptionType,  ChartOptions, OhlcData, VolumeData, StatisticTab, RangeTab } from "../models/ChartModels";
import { StatisticType } from "../services/StatisticService";
import { numFormatter } from "../utils/globalFuncs";
import icons from "../images/chartImages";


class ChartsConfig {
    public static seriesType:string = 'candlestick';
    public static annotationTypes: Array<string> = [
        OptionType.lineSegment, OptionType.lineArrowSegment, OptionType.lineRay, OptionType.lineArrowRay,
        OptionType.line, OptionType.lineArrow, OptionType.lineHorizontal, OptionType.lineVertical,
        OptionType.elliott3, OptionType.elliott5, OptionType.crooked3, OptionType.crooked5,
    ];
    public static indicatorsWithAxes = [
        'ad',
        'atr',
        'cci',
        'cmf',
        'disparityindex',
        'cmo',
        'dmi',
        'macd',
        'mfi',
        'roc',
        'rsi',
        'ao',
        'aroon',
        'aroonoscillator',
        'trix',
        'apo',
        'dpo',
        'ppo',
        'natr',
        'obv',
        'williamsr',
        'stochastic',
        'slowstochastic',
        'linearRegression',
        'linearRegressionSlope',
        'linearRegressionIntercept',
        'linearRegressionAngle',
        'klinger'
    ];
    public static basicOptions: Array<ChartOptions> = [
        { id: 1, icon: icons.fullscreen, options: [], type: OptionType.full },
        { id: 2, icon: icons.indicators, options: [], type: OptionType.indicators },
        { id: 3, icon: icons.series_candlestick, options: [
            {type:OptionType.seriesCandlestick,icon: icons.series_candlestick},
            {type:OptionType.seriesOhlc,icon: icons.series_ohlc},
            {type:OptionType.seriesLine,icon: icons.series_line},
        ]},
        { id: 4, icon: icons.segment, options: [
            {type:OptionType.lineSegment,label:'Segment',icon: icons.segment},
            {type:OptionType.lineArrowSegment,label:'Arrow Segment',icon: icons.arrow_segment},
            {type:OptionType.lineRay,label:'Ray',icon: icons.ray},
            {type:OptionType.line,label:'Line',icon: icons.line},
            {type:OptionType.lineArrow,label:'Arrow',icon: icons.arrow_line},
            {type:OptionType.lineHorizontal,label:'Horizontal',icon: icons.horizontal_line},
            {type:OptionType.lineVertical,label:'Vertical',icon: icons.vertical_line},
        ], label:'Lines' },
        { id: 5, icon: icons.elliott3, options: [
            {type:OptionType.elliott3,icon: icons.elliott3},
            {type:OptionType.elliott5,icon: icons.elliott5},
            {type:OptionType.crooked3,icon: icons.crooked3},
            {type:OptionType.crooked5,icon: icons.crooked5},
        ], label:'Crooked lines' },
        { id: 6, icon: icons.annotations_hidden, options: [], type: OptionType.toggle },
    ]
    public static options: Array<ChartOptions> = [

        { id: 4, icon: icons.label, options: [
            {type:OptionType.shapeLabel,label:'label',icon: icons.label},
            {type:OptionType.shapeCircle,label:'Circle',icon: icons.circle},
            {type:OptionType.shapeRectangle,label:'Rectangle',icon: icons.rectangle},
        ], type: OptionType.full },
        
        { id: 4, icon: icons.label, options: [
            {type:OptionType.shapeLabel,label:'label',icon: icons.label},
            {type:OptionType.shapeCircle,label:'Circle',icon: icons.circle},
            {type:OptionType.shapeRectangle,label:'Rectangle',icon: icons.rectangle},
        ], label:'Shapes' },

        { id: 8, icon: icons.fibonacci, options: [
            {type:OptionType.fibonacci,label:'Fibonacci',icon: icons.fibonacci},
            {type:OptionType.pitchfork,label:'Pitchfork',icon: icons.pitchfork},
            {type:OptionType.parallel,label:'Parallel',icon: icons.parallel_channel},
        ], label:'Advanced' },
        { id: 9, icon: icons.vertical_counter, options: [
            {type:OptionType.fibonacci,label:'Counter',icon: icons.vertical_counter},
            {type:OptionType.pitchfork,label:'Label',icon: icons.vertical_label},
            {type:OptionType.parallel,label:'Arrow',icon: icons.vertical_arrow},
        ], label:'Counters' },
        { id: 10, icon: icons.flag_elipse, options: [
            {type:OptionType.flagsCircle,label:'Circle',icon: icons.flag_elipse},
            {type:OptionType.flagsDiamond,label:'Diamond',icon: icons.flag_diamond},
            {type:OptionType.flagsSquare,label:'Square',icon: icons.flag_trapeze},
            {type:OptionType.flagsSimple,label:'Simple',icon: icons.flag_basic},
        ], label:'Flags' },
        { id: 12, icon: icons.current_price_show, options: [], type: OptionType.price },
        { id: 13, icon: icons.zoom_x, options: [
            {type:OptionType.zoomX,label:'Zoom X',icon: icons.zoom_x},
            {type:OptionType.zoomY,label:'Zoom Y',icon: icons.zoom_y},
            {type:OptionType.zoomXY,label:'Zoom XY',icon: icons.zoom_xy},
        ] },
    ];

    public static ohlcName: string = '价格';
    public static volumeName: string = '成交量';
    public static ohlcId: string = 'aapl-ohlc';
    public static volumeId: string = 'aapl-volume';

    public static setChart = (ohlc: Array<OhlcData>, volume: Array<VolumeData>) => {
        return {
            chart: {
                resetZoomButton: {
                    position: {
                        align: "right",
                        verticalAlign: "top",
                        x: 0,
                        y: -0,
                    },
                    relativeTo: "plot"
                },
                zoomType: 'x',
                backgroundColor: "#303030",
                borderColor: '#cf4e63',
                plotBackgroundColor: 0,
                spacing: [5, 0, 5, 5]

            },
            scrollbar: {
                enabled: false,
                // barBackgroundColor: 'rgba(73,73,73,1)',
                // barBorderRadius: 2,
                // barBorderWidth: 0,
                // buttonBackgroundColor: 'rgba(73,73,73,1)',
                // buttonBorderWidth: 0,
                // buttonArrowColor: '#aaaaaa',
                // buttonBorderRadius: 2,
                // rifleColor: '#aaaaaa',
                // trackBackgroundColor: 'rgba(73,73,73,0.3)',
                // trackBorderWidth: 0,
                // trackBorderColor: 'red',
                // trackBorderRadius: 2
            },
            navigator: {
                enabled: false,
                // height:40,
                // handles: {
                //     backgroundColor: '#aaaaaa',
                //     borderColor: 'rgba(73, 73, 73, 0.5)'
                // },
                // xAxis: {
                //     tickWidth: 0,
                //     lineWidth: 0,
                //     gridLineWidth: 1,
                //     tickPixelInterval: 200,
                //     gridLineColor:'rgba(73, 73, 73, 0.8)',
                //     labels: {
                //         align: 'left',
                //         style: {
                //             color: '#888',
                //             fontSize:'16px'
                //         },
                //         x: 3,
                //         y: -4
                //     }
                // }
            },
            rangeSelector: {
                enabled: false,
            },

            yAxis: [{
                labels: {
                    align: 'left',
                    style: { "fontSize": "18px" },
                },
                height: '80%',
                gridLineColor: '#252525',
                gridLineWidth: 0.5,
                endOnTick: false,
                tickAmount: 7,
                crosshair: {
                    label: {
                        enabled: true,
                        formatter: function (value:number): any {
                            return numFormatter(value);
                        },
                        style: { "fontSize": "18px" },
                    }
                },
                resize: {
                    enabled: true
                }
            }, {
                labels: {
                    align: 'left',
                    style: { "fontSize": "18px" },
                },
                top: '80%',
                gridLineWidth: 0.5,
                gridLineColor: '#252525',
                height: '20%',
                crosshair: {
                    label: {
                        enabled: true,
                        style: { "fontSize": "18px" },
                        format: '{value:.2f}'
                    }
                },
                endOnTick: false,
                tickAmount: 4,
                offset: 0,
            }],
            xAxis: [{
                labels: {
                    style: { "fontSize": "18px" },
                    // formatter: function (): any {
                    //     let value: number = (this as any).value;
                    //     return dateFormat("YYYY/mm/dd", new Date(value)).slice(2);
                    // }
                },
                crosshair: {
                    label: {
                        enabled: true,
                        style: { "fontSize": "18px" },
                    }
                },
                tickAmount: 4,
                tickColor: '#929292',
                tickLength: 4,
                tickWidth: 1,
                lineColor: "#757576",
            }],
            stockTools: {
                gui: {
                    enabled: true
                }
            },
            tooltip: {
                enabled: false
            },
            // tooltip: {
            //     shape: 'square',
            //     headerShape: 'callout',
            //     borderWidth: 0,
            //     shadow: false,
            //     positioner: (width: any, height: any, point: any) => {
            //         var Highcharts: any = (window as any).Highcharts;
            //         var chart = Highcharts,
            //             position;
            //         if (point.isHeader) {
            //             position = {
            //                 x: Math.max(
            //                     // Left side limit
            //                     chart.plotLeft,
            //                     Math.min(
            //                         point.plotX + chart.plotLeft - width / 2,
            //                         // Right side limit
            //                         chart.chartWidth - width - chart.marginRight
            //                     )
            //                 ),
            //                 y: point.plotY
            //             };
            //         } else {
            //             position = {
            //                 x: point.series.chart.plotLeft,
            //                 y: point.series.yAxis.top - chart.plotTop
            //             };
            //         }

            //         return position;
            //     }
            // },

            series: [{
                type: ChartsConfig.seriesType,
                id: ChartsConfig.ohlcId,
                name: ChartsConfig.ohlcName,
                data: ohlc,
                color: "#cf4e63",
                upLineColor: '#227565', // docs
                upColor: '#227565',
                turboThreshold: 7000,
                cropThreshold: 7000,
                animation:false,
                useOhlcData:  ChartsConfig.seriesType === 'line'
            }, {
                type: 'column',
                id: ChartsConfig.volumeId,
                name: ChartsConfig.volumeName,
                data: volume,
                turboThreshold: 7000,
                yAxis: 1
            }, {
                type: 'column',
                id: ChartsConfig.volumeId,
                name: ChartsConfig.volumeName,
                data: volume,
                turboThreshold: 7000,
                yAxis: 1
            }],


            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 1200
                    },
                    chartOptions: {
                        rangeSelector: {
                            inputEnabled: false
                        }
                    }
                }]
            }
        };
    }

    public static setStatisticChart = (data1: Array<Array<number>>, data2: Array<Array<number>>) => {
        return {
            chart: {
                events: {
                    load: function () {
                    }
                },
                zoomType: 'x',
                plotBackgroundColor: 0,
                spacing: [5, 0, 5, 5]

            },
            scrollbar: {
                enabled: false
            },
            navigator: {
                enabled: false
            },
            rangeSelector: {
                enabled: false,
            },
            tooltip: {
                enabled: false
            },
            yAxis: [{
                labels: {
                    align: 'right',
                    style: { "fontSize": "18px" },
                    formatter: function (): any {
                        let value: number = (this as any).value;
                        return numFormatter(value);
                    }
                },
                gridLineWidth: 0.5,
                endOnTick: true,
                crosshair: {
                    label: {
                        enabled: true,
                        formatter: function (value:number): any {
                            return numFormatter(value,2);
                        },
                        style: { "fontSize": "18px" },
                    }
                },
                // tickAmount: 7,
                opposite: false,
                resize: {
                    enabled: true
                }
            }],
            xAxis: [{
                labels: {
                    style: { "fontSize": "18px" },
           
                },
                crosshair: {
                    label: {
                        enabled: true,
                        style: { "fontSize": "18px" },
                    }
                },
                startOnTick: true,
                
            }],
            stockTools: {
                gui: {
                    enabled: true
                }
            },

            series: [{
                type: 'line',
                name: '总资产',
                data: data1,
                color: "#a86c24",
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                type: 'line',
                name: '总负债',
                color: "#2476a8",
                data: data2,
                tooltip: {
                    valueDecimals: 2
                }
            }],
        };
    }

    public static langOptions: object = {
        lang: {
            months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            shortWeekdays: ['七', '一', '二', '三', '四', '五', '六'],
            resetZoom: '重置缩放',
            rangeSelectorZoom: '范围选择'
        }
    }

    public static statisticTabs: Array<StatisticTab> = [
        {text:'收入', type: StatisticType.incomes,tips: ['总收入', '净收入']},
        {text:'资产', type: StatisticType.assets,tips: ['总资产', '总负债']},
        {text:'现金流', type: StatisticType.cashFlows,tips: ['总现金', '净增减额']},
    ];

    public static rangeTabs: Array<RangeTab> = [
        {text:'1Y',year:1},
        {text:'2Y',year:2},
        {text:'3Y',year:3},
        {text:'All',year:0},
    ];
}



export default ChartsConfig;